<template>
  <div class="dialog-gratuity-other text-center">
      <div class="dialog-title">其他金额</div>
      <div class="dialog-body">
          <input type="number" placeholder="可填写0.1~999" class="input-text" v-model="money">元
      </div>
      <div class="dialog-options">
          <button type="button" class="buton-cancel" @click.stop="hideDialog">取消</button><button type="button" class="buton-true" @click.stop="submitMoney">确定</button>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        money: ''
    };
  },
  computed: {},
  methods: {
      hideDialog(){
          this.$emit('hide-other-money');
      },
      submitMoney(){
          console.log(this.money)
          this.$emit('set-other-money', this.money);
      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.dialog-gratuity-other {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 300px;
    padding-top: 20px;
    font-size: 30px;
    color: #999;
    background-color: #fff;
    border-radius: 16px;
    transform: translate3d(-50%, -50%, 0);
    z-index: 200;
    .dialog-title {
        line-height: 2;
        color: #333;
    }
    .dialog-body {
        padding:  30px 0;
    }

    .input-text {
        width: 340px;
        height: 80px;
        padding: 0 20px;
        margin-right: 15px;
        border: 1px solid #ccc;
        line-height: 74px;;
        border-radius: 6px;
    }

    .dialog-options {
        height: 80px;
        line-height: 80px;
        position: relative;

        &:before{
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            top: 0;
            background: #ccc;
        }
        &:after {
            content: '';
            display: block;
            height: 80px;
            width: 2px;
            background: #ccc;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -1px;
        }

        button {
            width: 50%;
            background-color: transparent;
        }

        .buton-true { color: #1549eb; }
    }

}
</style>